<template>
    <el-popover placement="bottom" width="600" trigger="click">
        <div class="btn_area" style="margin-bottom: 10px;">
            <el-button type="danger" size="mini" @click="handleClear">清空</el-button>
        </div>
        <vxe-table-template :data="logs" :options.sync="tableOptions" />
        <el-badge :value="logs.length" slot="reference">
            <i class="fa fa-bug" style="color: red;" />
        </el-badge>
    </el-popover>
</template>

<script>
import { mapState } from "vuex";

export default {
    name: "ErrorLog",
    data() {
        let _this = this;
        return {
            tableOptions: {
                ref: "errorLogTable",
                columns: [
                    {
                        label: '功能名称',
                        prop: 'name',
                        align: 'center',
                    },
                    {
                        label: '出错信息',
                        prop: 'error',
                        align: 'center',
                    },
                    {
                        label: '时间',
                        prop: 'date',
                        align: 'center',
                        width: 90,
                    },
                ],
                operates: {
                    fixed: "right",
                    list: [
                        {
                            id: "copy",
                            icon: "el-icon-document-copy",
                            type: "primary",
                            size: "mini",
                            show: true,
                            tooltip: {
                                content: "复制",
                            },
                            method: (index, row) => {
                                _this.handleCopy(row);
                            },
                        },
                    ],
                },
                pagination: false,
                getMaxHeight() {
                    return 200;
                },
            },
        };
    },
    computed: {
        ...mapState('errorLog', [ 'logs' ]),
    },
    methods: {
        handleClear() {
            this.$store.dispatch('errorLog/clearErrorLog');
        },
        handleCopy(row) {
            let value = "功能名称：" + row.name + "，出错信息：" + row.error + "，时间：" + row.date+"\n"+row.trace;
            console.log(value)
            //JSON.stringify({name: row.name, error: row.error, date: row.date});
            let input = document.createElement('textarea');
            document.body.appendChild(input);
            input.innerHTML = value;
            input.select();
            // 执行浏览器复制命令
            let bol = document.execCommand("copy");
            if (bol) {
                this.$message.success("复制成功！");
            }
        },
    },
}
</script>

<style scoped>

</style>
